<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui" template="/layout/principal.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">
            <h:outputText value="Lista de Agentes"/>
        </h1>

        <h:form>
            <p:growl id="growl" showDetail="true" life="3000" />

            <p:panel header="Filtro">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Estado : " for="estadoId" />
                    <p:selectOneMenu id="estadoId" value="#{agents.estado}" style="width: 200px;">
                        <f:selectItem itemLabel="Todos" itemValue="*" />
                        <f:selectItem itemLabel="Activa" itemValue="A" />
                        <f:selectItem itemLabel="Inactiva" itemValue="I" />
                        <p:ajax update="dttAgents" listener="#{agents.actualizarLista}" />
                    </p:selectOneMenu>
                </h:panelGrid>
            </p:panel>

            <p:panel header="Acciones">
                <p:commandButton value="Nuevo Agente" update=":form:displayNew" action="#{agents.limpiarAgente}"
                    image="ui-icon ui-icon-check" oncomplete="dlg3.show()" />
            </p:panel>

            <p:dataTable id="dttAgents" var="ag" value="#{agents.listAgent}" paginator="true" rows="10">
                <p:column headerText="Numero">
                    <h:outputText value="#{ag.numero}" />
                </p:column>
                <p:column headerText="Nombre">
                    <h:outputText value="#{ag.nombre}" />
                </p:column>
                <p:column headerText="Status">
                    <h:outputText value="#{ag.estado eq 'A' ? 'Conectado' : 'Desconectado'}" />
                </p:column>

                <p:column style="width:100px" headerText="Opciones">
                    <h:panelGrid columns="1" styleClass="actions" cellpadding="2">
                        <p:commandButton update=":form:displayEdit" oncomplete="edit.show()"
                            image="ui-icon ui-icon-pencil" title="View">
                            <f:setPropertyActionListener value="#{ag}" target="#{agents.selectedAgent}" />
                        </p:commandButton>
                    </h:panelGrid>
                </p:column>
            </p:dataTable>

            <p:dialog header="Nuevo Agente" widgetVar="dlg3" showEffect="explode" hideEffect="explode">
                <h:panelGrid id="displayNew" columns="2" cellpadding="4">
                    <h:outputText value="Number: " />
                    <p:inputText value="#{agents.numero}" />

                    <h:outputText value="Nombre: " />
                    <p:inputText value="#{agents.nombre}" />

                    <h:outputText value="Password: " />
                    <p:password value="#{agents.password}" feedback="false" />

                    <f:facet name="footer">
                        <p:commandButton value="Guardar" update="dttAgents growl" action="#{agents.crear}"
                            image="ui-icon ui-icon-check" onclick="dlg3.hide()" />
                    </f:facet>
                </h:panelGrid>
            </p:dialog>

            <p:dialog header="Agente Detalle" widgetVar="edit" resizable="false" showEffect="explode"
                hideEffect="explode">
                <h:panelGrid id="displayEdit" columns="2" cellpadding="4">
                    <h:outputText value="Number : " />
                    <p:inputText value="#{agents.selectedAgent.numero}" />

                    <h:outputText value="Nombre : " />
                    <p:inputText value="#{agents.selectedAgent.nombre}" />

                    <h:outputText value="Password : " />
                    <p:password value="#{agents.selectedAgent.password}" feedback="false" />

                    <h:outputText value="Estado : " />
                    <p:selectOneMenu value="#{agents.selectedAgent.estado}" style="width: 100px;">
                        <f:selectItem itemLabel="Activa" itemValue="A" />
                        <f:selectItem itemLabel="Inactiva" itemValue="I" />
                    </p:selectOneMenu>

                    <f:facet name="footer">
                        <p:commandButton value="Actualizar" update="dttAgents growl"
                            actionListener="#{agents.actualizar}" image="ui-icon ui-icon-check" onclick="edit.hide()" />
                        <p:commandButton value="Cancel" onclick="edit.hide()" type="button"
                            image="ui-icon ui-icon-close" />
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>